﻿@{
    ViewBag.Title = "Boggle";
    Layout = "~/Views/Shared/_Layout.cshtml";
    
    //css/less
    Bundles.Reference("Content/Site.css");
    Bundles.Reference("Content/themes/base/jquery.ui.all.css");
    Bundles.Reference("Content/jquery.contextMenu.css");
    Bundles.Reference("Content/jquery.handsontable.css");
    Bundles.Reference("Content/Boggle.less");
    
    //javascript
    Bundles.Reference("Scripts/jquery-1.8.2.js");
    Bundles.Reference("Scripts/jquery-ui-1.9.0.js");
    Bundles.Reference("Scripts/jquery.blockUI.js");
    Bundles.Reference("Scripts/site.js");
    
    Bundles.Reference("Scripts/jquery.ui.position.js");
    Bundles.Reference("Scripts/jquery.contextMenu.js");
    Bundles.Reference("Scripts/jquery.handsontable.js");
    Bundles.Reference("Scripts/knockout-2.2.0.debug.js");
    Bundles.Reference("Scripts/knockout.mapping-latest.debug.js");
    Bundles.Reference("Scripts/Models/boggle-view-model.js");
    Bundles.Reference("Scripts/Models/boggle-cell-view-model.js");
    Bundles.Reference("Scripts/Models/boggle-traversal-view-model.js");
    Bundles.Reference("Scripts/boggle.js");
}

<p>Left click a cell to add a letter to the boggle board. Right click to add and remove columns/rows.</p>
<div id="grid-container">
    <div id="grid"></div>​
    <button class="button randomize">Randomize</button>
    <button class="button solve">Solve</button>
</div>

<div id="solutions-container">
    <h3>Solutions</h3>
    <p>Hover over a word found to display its constituent cells. Results may appear duplicate but each entry has a unique traversal.</p>
    <div id="solutions">
        <span data-bind="visible: wordTraversals() != undefined && wordTraversals().length === 0">No words were found</span>
        <div data-bind="foreach: wordTraversals">
            <div data-bind="text: word, event: { mouseover: highlightGrid, mouseout: unhighlightGrid }" class="solution"></div>
        </div>
    </div>
</div>


   

